<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>

		<style type="text/css">
			body {background-color:#F5FFFA}
		</style>
		<script>
			window.resizeTo(800, 640);
		</script>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Logged Browsing History</title>

		<!--	
			Licensed under the Apache License, Version 2.0 (the "License");
			you may not use this file except in compliance with the License.
 			You may obtain a copy of the License at
 
				http://www.apache.org/licenses/LICENSE-2.0

 			Unless required by applicable law or agreed to in writing, software
 			distributed under the License is distributed on an "AS IS" BASIS,
 			WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 			See the License for the specific language governing permissions and
 			limitations under the License.

 			Author: Kyle Scholz      http://kylescholz.com/
 			Copyright: 2006-2007
			
			MODIFIED BY BRENT MOMBOURQUETTE 2009
 		-->
		
		<!-- JSViz Libraries -->
		<script language="JavaScript" src="chrome://BreadCrumbs/content/physics/ParticleModel.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/physics/Magnet.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/physics/Spring.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/physics/Particle.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/physics/RungeKuttaIntegrator.js"></script>
		
		<script language="JavaScript" src="chrome://BreadCrumbs/content/layout/graph/ForceDirectedLayout.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/layout/view/HTMLGraphView.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/layout/view/SVGGraphView.js"></script>

		<script language="JavaScript" src="chrome://BreadCrumbs/content/util/Timer.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/util/EventHandler.js"></script>

		<script language="JavaScript" src="chrome://BreadCrumbs/content/io/DataGraph.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/io/HTTP.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/io/XMLTreeLoader.js"></script>

		<!-- BreadCrumbs scripts -->
		<script language="JavaScript" src="chrome://BreadCrumbs/content/build_graph.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/manipulate_graph.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/edit_annotations.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/session_control.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/session_trail.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/graph_page.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/graph_tab.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/filter_tab.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/options_tab.js"></script>
		<script language="JavaScript" src="chrome://BreadCrumbs/content/manipulate_db.js"></script>

		<script type="text/javascript" src="chrome://BreadCrumbs/content/tabber.js"></script>
		<link rel="stylesheet" href="chrome://BreadCrumbs/content/tab_styles.css" TYPE="text/css" MEDIA="screen">
		<link rel="stylesheet" href="chrome://BreadCrumbs/content/tab_styles-print.css" TYPE="text/css" MEDIA="print">
		
		<link rel="stylesheet" type="text/css" href="chrome://BreadCrumbs/content/graph_page_styles.css"/>
		
		
		<script language="JavaScript">
		
			// The layout has to be a global variable so that it can be passed to domEdit.forcesControl from the stopAnimation function
			var layout;
			var forcesStopped = false;
		
			function init() {
				// Create the container layout of the graph
				layout = new ForceDirectedLayout( document.body, true );
				
				/* 
				 * Override the default configeration properties
				 */
				layout.config._default = {
					model: function( dataNode ) {
						return {
							mass: .5
						}
					},
					
					/*
					 * Set the visual properties of each node
					 * @param {DataGraphNodee} dataNode
					 * @param {Particle} modelNode
					 * @return{DOM}
					 */
					view: function( dataNode, modelNode ) {
						var nodeElement = document.createElement( 'div' );
						
						nodeElement.style.position = "absolute";
						nodeElement.style.width = "16px";
						nodeElement.style.height = "16px";
						nodeElement.style.backgroundImage = "url('" + dataNode.fav + "')";
						nodeElement.style.backgroundPosition = "center";
						nodeElement.style.backgroundColor = "#F0FFFF";
						nodeElement.style.borderStyle = "solid";
						nodeElement.style.borderWidth = "2px";
						nodeElement.style.borderColor = dataNode.color;
						
						nodeElement.innerHTML = '<img width="1" height="1">';
						nodeElement.id = "node:"+dataNode.nodeURLKey;
						nodeElement.node = dataNode; // This is needed to have access to the dataNode object for titleChange() in graph_page.js
						
						var nodeObj = new Object();
						nodeObj['idx'] = dataNode.nodeURLKey;
						nodeObj['particle'] = modelNode;
						graphParticles.push(nodeObj); // Add this to the array of graph particles to record coordinates
						
						nodeElement.onmousedown =  new EventHandler( layout, layout.handleMouseDownEvent, modelNode.id )
						nodeElement.onmouseover =  new EventHandler( window, graphHTMLControl.showNodeToolTip, dataNode, modelNode );
						nodeElement.onmouseout =  new EventHandler( window, graphHTMLControl.hideNodeToolTip, dataNode);
						nodeElement.oncontextmenu = new EventHandler( window, graphHTMLControl.displayNodeContext, dataNode, modelNode, layout );
						return nodeElement;
					}
				}

				/* 
				 * Override the default spring properties
				 * @return {Object}
				 */
        		layout.forces.spring._default = function( nodeA, nodeB, isParentChild ) {
					return {
						springConstant: 0.2,
						dampingConstant: 0.2,
						restLength: 60
					}
				}
				
				/* 
				 * Override the default magnet properties
				 * @return {Object}
				 */
        		layout.forces.magnet = function() {
					return {
						magnetConstant: -3000,
						minimumDistance: 40
					}
				}

				layout.model.ENTROPY_THROTTLE=false;
				buildGraph.makeGraph(layout); // build the graph

				// Start organizing the data of the graph, in timed intervals
				var buildTimer = new Timer( 150 );
				buildTimer.subscribe( layout );
				buildTimer.start();
				
			}
			
			
			/*
			 * Update the graph in real time, when new sites are logged in logger.js
			 * Globals: layout, forcesStopped
			 */
			function liveUpdate() {
				var returnType = buildGraph.updateGraph();
				if (returnType == 0) { // new root
					layout.dequeueNode();
				} else if (returnType == 1) { // new edge
					layout.dequeueRelationship();
				} else { //returnType == 2, new edge and new node
					layout.update(); // Does both dequeueNode/Relationship
				}
				if (forcesStopped) // Don't want the animation to start again
					graphTab.stopAnimation();
			}
			
			// Register the callback to update the graph in real time
			window.opener.util.registerUpdateCallback(liveUpdate);
			// Register the callback to automatically reload the graph
			window.opener.util.registerReloadCallback(graphTab.reloadGraph);
			// Register the callback to update the title of a node when it recieve a new title through the Quick Title Edit button [see util.js]
			window.opener.util.registerQuickCallback(graphHTMLControl.changeTitle);
			// This prevents the initial HTML of the tabs from flicking into view upon opening this html page
			document.write('<style type="text/css">.tabber{display:none;}<\/style>');
		</script>
	</head>
<body onclick="graphHTMLControl.closeContexts()" style="background-color:#B4EEB4>
<div id="debug" style="position:absolute"></div>

<div class="tabber" style="position:absolute;left:170px;">
	<div class="tabbertab">
		<h2>Graph</h2>
		<input 
			type="button" 
			id="reload" 
			value="Reload"
			class="btn"
			onclick="graphTab.reloadGraphButton()" 
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:190px;width:60px;top:55px;">
		</input>
		<input 
			type="button" 
			id="forcesControl" 
			value="Stop Animation"
			class="btn"
			onclick="graphTab.stopAnimation()"
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:290px;width:100px;top:55px;">
		</input>
		<input 
			type="button" 
			id="optionsButton" 
			value="Settings"
			class="btn"			
			onclick="graphTab.optionsMenu()"
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:430px;width:100px;top:55px;">
		</input>
	   </div>

	 <div class="tabbertab">
		<h2>Filter</h2>
		<input 
			type="button" 
			id="filterButton"
			value="Filter"
			class="btn"
			onclick="filterTab.filter()"
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="top:55px;left:190px;width:100px;">
		</input>
		<input type="text" id="filterTextArea" style="position:absolute;top:40px;left:140px;width:100px"/>
		<var id="filteringText" style="position:absolute;top:40px;left:260px;width:100px">Filtering...Nothing</var>
    </div>

    <div class="tabbertab">
		<h2>Options</h2>
		<input 
			type="button" 
			id="show-hide" 
			value="Show Session Trail"
			class="btn"
			onclick="optionsTab.trailControl()"
		    onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:190px;width:110px;top:55px;">
		</input>
		<input 
			type="button" 
			id="save-button" 
			value="Save"
			class="btn"
			onclick="optionsTab.preSaveSession()"
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:390px;width:100px;top:55px;">
		</input>
		<input 
			type="button" 
			id="load-button" 
			value="Load"
			class="btn"
			onclick="optionsTab.preLoadSession()"
			onmouseover="graphHTMLControl.goLite(this.id)" 
			onmouseout="graphHTMLControl.goDim(this.id)"
			style="left:530px;width:100px;top:55px;">
		</input>
    </div>
</div>

<div id="tooltip"></div>
<div id="nodeContextMenu">
	<ul class="cmenu">  
		<li><a href='#' id="editNode">Edit Title</a></li>
		<li><a href='#' id="go">Visit Site</a></li>
		<li><a href='#' id="deleteNode">Delete Node</a></li> 
		<li class="topSep">  
			<a href='#' id="closeNode">Close</a>  
		</li>  
	</ul> 
</div>
<div id="edgeContextMenu">
	<ul class="cmenu">
		<li><a href='#' id="editEdge">Edit Annotation</a></li>
		<li><a href='#' id="deleteEdge">Delete Edge</a></li> 
		<li class="topSep">  
			<a href='#' id="closeEdge">Close</a>  
		</li>  
	</ul> 
</div>
<div id="orderOfVisits" style="display:none">
	<ul class="visitsList"></ul>
</div>

</body>

<script type="text/javascript">
	// This cannot be placed in the body's onload attribute due to how the tab library works
	init();
</script>

</html>
